<template>
  <div
    class="subText"
    v-html="innerText"
    :contenteditable="canEdit"
    @focus="isLocked = true"
    placeholder="请输入正文..."
    @blur="isLocked = false"
    @input="changeText"
  ></div>
</template>
<script>
export default {
  name: "editDiv",
  props: {
    value: {
      type: String,
      default: "",
    },
    canEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      innerText: this.value,
      isLocked: false,
    };
  },
  watch: {
    'value'() {
      if (!this.isLocked && !this.innerText) {
        this.innerText = this.value;
      }
    },
  },
  methods: {
    changeText() {
      //解决输入中文 直接输出英文
        let val = this.$el.innerHTML.trim();
        this.$emit("input", val);

    },
 
  },
};
</script>
<style scoped>
.subText {
  width: 100%;
  min-height: 0.84rem;
  max-height: 4.2rem;
  box-sizing: border-box;
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 0.2rem;
  outline: none;
  border-bottom: 0.01rem solid #f4f4f4 !important;
  font-size: 0.14rem;
  box-sizing: border-box;
}

.subText:empty:before {
  content: attr(placeholder);
  color: rgba(153, 153, 153, 1);
  font-size: 0.14rem;
  font-family: PingFang SC;
}
.subText:focus::before {
  content: none;
}
</style>
